<template>
  <h2>当前求和为: {{num}}</h2>
  <button @click="num++">点我+1</button>

  <hr>
  <h2>当前信息为：{{msg}}</h2>
  <button @click="msg+='!'">点我加！</button>

  <hr>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h2>薪资: {{person.job.j1.salary}}K</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">修改薪资</button>
</template>

<script setup>
  import {ref, watch, reactive} from 'vue';
  let num = ref(0);
  let msg = ref('Hello Tom');

  let person = reactive({
		name: '张三',
		age: 10,
    job: {
			j1: {
				salary: 20
      }
    }
	});

  // 情况1：监听ref定义的一个响应式数据
  // watch(num, function (newValue, oldValue) {
	// 	console.log("新值:", newValue);
	// 	console.log("旧值:", oldValue);
	// })


  // 情况2: 监听ref定义的多个响应式数据
  // watch([num, msg], (newValue, oldValue) => {
	// 		console.log("新值:", newValue);
	// 		console.log("旧值:", oldValue);
  // })

  // 添加配置 immediate
  // watch(num, (newValue, oldValue) => {
  // 	console.log("num的值变化了", newValue, oldValue);
  // }, {immediate: true})


  // 情况3：监听reactive定义的一个响应式数据的全部属性
  // 注意
  //  1）此处无法正确获取oldValue！！！
  //  2) 强制开启了深度监视，deep配置无效
  // watch(person, (newValue, oldValue) => {
	// 	console.log("person的值变化了", newValue, oldValue);
  // });

  // 情况4：监听reactive定义的一个响应式数据的某个属性
  // watch(() => person.job.j1.salary, (newValue, oldValue) => {
	// 	console.log("person的薪水值变化了", newValue, oldValue);
  // });

  // 情况5：监听reactive定义的响应式数据的某些属性
  // watch([() => person.name, () => person.age], (newValue, oldValue) => {
	// 	console.log("person的name或age值变化了", newValue, oldValue);
	// });

  // 情况6：监听reactive定义的响应式数据的单个对象类型的属性
  // 注意这种情况需要加上 deep=true 的配置
    watch(() => person.job, (newValue, oldValue) => {
			console.log("person的job值变化了", newValue, oldValue);
    }, {deep: true})




</script>
